<!--
***申请分销商页面***
-->
<template>
  <div>
    <v-header v-if="!$root.ISAPP">
      <div class="nav-tab2">
        <h3>尖货买手</h3>
      </div>
    </v-header>
    <div class="register">
      <div class="head"><img src="//files.eyee.com/mcdn/img/dis-shenqing.png" ></div>
      <div class="agreement" :class="{'select': isAgree}" @click="agree">我已经阅读并同意<a href="javascript:;" @click.stop="switchShow"> 《分销用户服务协议》 </a></div>
      <div class="btnBox">
        <img src="//files.eyee.com/mcdn/img/dis-apply-btn.png" @click="checkphone"/>
      </div>
      <div class="popup" v-show="showAgreement" @click="switchShow">
        <div class="box" @click.stop>
          <div class="title">分销用户服务协议</div>
          <div class="close" @click="switchShow"></div>
          <div class="content"><Agreement></Agreement></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Agreement from './Agreement'
import { getUrlParam } from '@/common/util'
import { isDistribution } from '../../common/api/distribution'
export default {
  data() {
    return {
      isAgree: true,
      showAgreement: false,
      parentid: null
    }
  },
  components: {
    Agreement
  },
  created() {
    if (this.$root.ISAPP) {
      let param = getUrlParam('param')
      this.$store.dispatch('setUserInfo', JSON.parse(decodeURIComponent(param)))
      window.document.title = '尖货买手'
    }
    if (this.$route.params.parentid) {
      this.parentid = this.$route.params.parentid
    }

    isDistribution()
      .then(res => {
        if (res.type === 1) {
          window.localStorage.setItem('distributionId', res.distributionid)
          this.distributionId = res.distributionid
          this.gotoPage({
            appUrl: {
              name: 'gotoAppWebview',
              params: {
                distributionId: this.distributionId,
                url: `${window.document.location.protocol}//${window.document.location.host}/distribution`
              }
            },
            webUrl: {
              name: '/distribution/',
              params: {}
            }
          })

        } else {
          window.localStorage.removeItem('distributionId')
        }
      })
      .catch(e => {
        console.log(e)
      })
  },
  methods: {
    checkphone() {
      if (this.isAgree) {
        if (this.parentid) {
          this.$router.replace(`/distribution/checkphone/${this.parentid}`)
        } else {
          this.$router.replace(`/distribution/checkphone`)
        }
      } else {
        this.toast('请先同意《用户服务协议》')
        return
      }
    },
    agree() {
      this.isAgree = !this.isAgree
    },
    switchShow() {
      this.showAgreement = !this.showAgreement
    },
    gotoPage(item) {
      console.log('click item: ', this.$root.ISAPP, item)
      if (this.$root.ISAPP) {
        this.javascriptBridge(item.appUrl)
      } else {
        this.$router.push(item.webUrl.name)
      }
    },
  }
}
</script>
<style lang='scss' scoped>
  .register{
    .body{
      background: url(/static/img/d_apply_bg.png) no-repeat;
      background-size: 100% auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 3vw;
      .title{
        width: 64.8vw;
      }
      .text{
        font-size: 14px;
        padding: 3vw 5.3vw 24vw;
      }
    }
    .agreement{
      font-size: 12px;
      position: fixed;
      bottom: 14vw;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      a{
        font-weight: bold;
        color: #fff;
      }
      &::before{
        content: '';
        width: 15px;
        height: 15px;
        display: inline-block;
        background: url(/static/img/d_apply_choose1.png);
        background-size: 15px 15px;
        margin-right: 5px;
      }
      &.select::before{
        background: url(/static/img/d_apply_choose2.png);
        background-size: 15px 15px;
      }
    }
    .btnBox{
      position: fixed;
      bottom: 0;
      width: 100%;
      img{
        display: block;
        width: 100%;
      }
    }
    .popup{
      position: fixed;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.4);
      top: 0;
      left: 0;
      z-index: 100;
      display: flex;
      justify-content: center;
      align-items: center;
      div.box{
        width: 94vw;
        height: 88vh;
        background: #fff;
        border-radius: 8px;
        position: relative;
        .title{
          text-align: center;
          line-height: 10vh;
          border-bottom: 1px dashed #ccc;
        }
        .content{
          padding: 4vw;
          height: 78vh;
          overflow-y: scroll;
          -webkit-overflow-scrolling: touch;
        }
        .close{
          width: 7vw;
          height: 7vw;
          position: absolute;
          right: 3vw;
          top: 3vw;
          z-index: 10;
          &::before{
            content: '';
            width: 100%;
            height: 1px;
            background: #333;
            position: absolute;
            transform-origin: 50% 0;
            transform: rotate(45deg);
            position: absolute;
            top: 3vw;
          }
          &::after{
            content: '';
            width: 100%;
            height: 1px;
            background: #333;
            position: absolute;
            transform-origin: 50% 0;
            transform: rotate(-45deg);
            position: absolute;
            top: 3vw;
          }
        }
      }
    }
  }
  @media only screen and (device-width:375px) and (device-height:812px) {
  .btnBox {
    border-bottom: 34px solid #fff !important;
  }

  .agreement{
    bottom: 23vw !important;
  }
}
</style>
